---
title: StyledProvider | gluestack-style
description: gluestack-style Style exports a StyledProvider component, a higher-order component that wraps your entire application and provides the library's configuration options.
---

import { Canvas, Meta, Story } from '@storybook/addon-docs';

<Meta title="styled/Getting Started/StyledProvider" />

# StyledProvider

**`gluestack-style`** exports a **`StyledProvider`** component that can be used to configure the library.

The **`StyledProvider`** component is a higher-order component that wraps your entire application and provides the library's configuration options through its **`config`** prop.

You can use the **`StyledProvider`** component to set global options, such as breakpoints and theme.

Here is an example of how you can use the **`StyledProvider`** component to configure the library:

```jsx
import { StyledProvider, createConfig } from '@gluestack-style/react';

const config = createConfig({
  aliases: {
    bg: 'backgroundColor',
    bgColor: 'backgroundColor',
    rounded: 'borderRadius',
    h: 'height',
    w: 'width',
  },
  tokens: {
    colors: {
      primary0: '#ffffff',
      primary400: '#c084fc',
      primary500: '#a855f7',
      primary600: '#9333ea',
    },
    space: {
      4: 16,
      5: 20,
      6: 24,
    },
    radii: {
      sm: 4,
      md: 6,
    },
    letterSpacings: {
      md: 0,
    },
    lineHeights: {
      sm: 20,
      md: 22,
    },
    fontWeights: {
      normal: '400',
      medium: '500',
    },
    fontSizes: {
      sm: 14,
      md: 16,
    },
    mediaQueries: {
      sm: '@media (min-width: 480px)',
      md: '@media (min-width: 768px)',
    },
  },
  globalStyle: {
    variants: {
      shadow: {
        softShadow: {
          shadowOffset: {
            width: 0,
            height: 0,
          },
          shadowRadius: 10,
          shadowOpacity: 0.1,
          _android: {
            shadowColor: '$primary500',
            elevation: 5,
            shadowOpacity: 0.05,
          },
        },
      },
    },
  },
} as const);

const App = () => (
  <StyledProvider config={config}>
    <YourApp />
  </StyledProvider>
);
```

In this example, the **`StyledProvider`** component is used to set the breakpoints and theme for the entire application, and the **`config`** prop is passed with the configuration options.

It's important to note that the **`StyledProvider`** needs to be placed at the top level of your application, so that it can provide the config to all the other components that use the library.

Once you have wrapped your application with the **`StyledProvider`**, you will be able to use the breakpoints, theme and other configs throughout your application.

### Color Mode:

To switch between color modes, the UI library may provide a toggle button or some other mechanism that can be used to change the color mode. When the color mode is changed, the library updates the colors used throughout the interface to match the new mode.

To implement this the `StyledProvider` accepts a `colorMode` prop. Just handle your **`colorMode`** and pass your current **`colorMode`** in this prop and all your components will start reacting to your colorMode changes.

```jsx
import React from 'react';
import { View, Pressable, Text } from 'react-native';
import { styled, StyledProvider } from '@gluestack-style/react';
import { config } from './gluestack-style.config';
const StyledComponent = styled(
  View,
  {
    p: '$4',
    _dark: {
      bg: '$info600',
    },
    _light: {
      bg: '$info800',
    },
  },
  {}
);

export function ColorMode({ ...args }) {
  const [currentColorMode, setCurrentColorMode] = React.useState('light');

  return (
    <StyledProvider config={config} colorMode={currentColorMode}>
      <Pressable
        style={{
          backgroundColor: 'gray',
          padding: 12,
          marginBottom: 12,
        }}
        onPress={() => {
          setCurrentColorMode(currentColorMode === 'dark' ? 'light' : 'dark');
        }}
      >
        <Text style={{ color: 'white' }}>
          Toggle {currentColorMode === 'dark' ? 'light' : 'dark'}
        </Text>
      </Pressable>
      <StyledComponent />
    </StyledProvider>
  );
}
```

### Global Style Injector:

The `StyledProvider` accepts a `globalStyleInjector` prop. This prop is a function that will be called with config. You can use this function to inject global styles into your application.

```jsx
import React from 'react';
import { Pressable, Text } from 'react-native';
import {
  styled,
  StyledProvider,
  createGlobalStylesWeb,
} from '@gluestack-style/react';
import { config } from './gluestack-style.config';

const globalStyles = createGlobalStylesWeb({
  'body': {
    bg: '$red500',
  },
  '.className': {
    body: {
      bg: '$info600',
    },
  },
});

const StyledButton = styled(Pressable, {
  bg: '$primary600',
  px: '$6',
  py: '$4',
  _dark: {
    bg: '$info600',
  },
  _light: {
    bg: '$info800',
  },
});

const App = () => {
  return (
    <StyledProvider config={config} globalStyleInjector={globalStyles}>
      <StyledButton />
    </StyledProvider>
  );
};
```
